// components/preViewImg/preViewImg.js
const app = getApp();
const util = require('../../utils/util')

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * @param {array} previewImgList - 组件传入 { specId } 时，传入的 { previewImgList } 数据格式为 
     * @example 例：[{url:'路经/xx.图片格式',specId:0}]
     * @notes 组件未传 { specId } 时，传入的 { previewImgList } 数据格式为 
     * @example 例：['路经/xx.图片格式','路经/xx.图片格式']
     */
    previewImgList: {
      type: Array,
      value: []
    },
    previewImg: {
      type: String,
      value: ''
    },
    product: {
      type: null
    },
    spcSwich: {
      type: Boolean,
      value: true
    },
    /**
     * @param {number} specId - 多规格商品需要传，图片路径相同时，通过规格 id 选择对应图片 
     */
    specId: {
      type: Number,
      value: null
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    preview_box_top: 0,
    touchStartTime: null,
    touchEndTime: null,
    touchS: [],
    touchE: [],
    scaleObj: {
      scale: 1,
      x: 0,
      y: 0,
      yes: false
    },

    imgindex: 0,
    imgindex: 0,
    left: 0,
    previewHideStatus: false,
    windowWidth: 750,
    menuBtnLeftWith: 0,
    menuBtnTop: 0,
    menuBtnHeight: 0,
    timer: null,
    scale: 1,
    isSingleTouch: true,
    productList: [],
  },
  lifetimes: {
    attached() {
      let that = this;
      this.setNavSize();
    }
  },
  observers: {
    'previewImg,previewImgList,specId'(previewImg, previewImgList, specId) {
      const that = this
      previewImgList.map((el, index) => {
        if (previewImg == el && specId == null) {
          that.setData({
            imgindex: index
          })
        }
        if (specId != null && specId == el.specId) {
          that.setData({
            imgindex: index
          })
        }
      })
      if (previewImgList.length > 1) {
        that.data.scaleObj.yes = true
      }
    },
    'imgindex'(newVal) {
      const that = this
      setTimeout(() => {
        that.setData({
          scale: 1
        })
      }, 500)
    },
    'product'(product) {
      const that = this
      this.setData({
        productList: util.isArray(product) ? product : []
      })
      console.log(product, 'product');

    },
    'specId'(specId) {
      const that = this
      console.log(specId, 'specId');

    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    touchStart: function (e) {
      clearTimeout(this.data.timer)
      if (e.touches.length === 1) {
        this.setData({ isSingleTouch: true });
      } else {
        this.data.scaleObj.yes = false;
        this.setData({ isSingleTouch: false });
      }
      this.data.touchStartTime = e.timeStamp //时间点
      let sx = e.touches[0].pageX
      let sy = e.touches[0].pageY
      this.data.touchS = [sx, sy];
    },

    touchMove: function (e) {
      clearTimeout(this.data.timer)
      let start = this.data.touchS;
      let sx = e.touches[0].pageX;
      let sy = e.touches[0].pageY;
      this.data.touchE = [sx, sy];
    },

    touchEnd: function (e) {
      this.data.touchEndTime = e.timeStamp //时间点
      let { touchS, touchE, scaleObj, isSingleTouch, imgindex } = this.data
      let start = touchS
      let end = touchE
      const length = this.data.previewImgList.length
      const that = this
      //如果((start[0] < end[0] - 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //左滑动
      //如果((start[0] > end[0] + 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //右滑动
      clearTimeout(this.data.timer)
      if (scaleObj.yes && isSingleTouch) {
        if (end[0] == 0) {
          console.log('点击')
        } else if ((start[0] < end[0] - 100) && (scaleObj.scale == 1 && scaleObj.x == 0 && scaleObj.y == 0)) {
          if (that.data.imgindex >= 0) {
            that.data.imgindex -= 1;
          }
          if (that.data.imgindex < 0) {
            that.data.imgindex = length - 1;
          }
          that.setData({
            imgindex: that.data.imgindex
          });
        } else if ((start[0] > end[0] + 100) && (scaleObj.scale == 1 && scaleObj.x == 0 && scaleObj.y == 0)) {
          if (that.data.imgindex <= length - 1) {
            that.data.imgindex += 1;
          }
          if (that.data.imgindex > length - 1) {
            that.data.imgindex = 0;
          }
          that.setData({
            imgindex: that.data.imgindex
          });
        } else if (((start[1] > end[1] + 100) || (start[1] < end[1] - 100)) && ((start[0] < end[0] + 20) || (start[0] > end[0] - 20))) {
          that.setData({
            preview_box_top: '100%',
          })
          that.closePreview()
        }
        that.data.touchE = [0, 0];
      } else if (!scaleObj.yes && isSingleTouch) {
        if (((start[1] > end[1] + 100) || (start[1] < end[1] - 100)) && ((start[0] < end[0] + 20) || (start[0] > end[0] - 20))) {
          that.setData({
            preview_box_top: '100%',
          })
          that.closePreview()
        }
        that.data.touchE = [0, 0];
      } else {
        that.data.scaleObj.yes = false;
        that.data.timer = setTimeout(() => {
          if (that.data.scaleObj.x == 0 && that.data.scaleObj.y == 0 && that.data.scaleObj.scale == 1) {
            that.data.scaleObj.yes = true;
          }
        }, 500)
      }
    },
    showPreview() {
      this.setData({
        previewHideStatus: true,
        preview_box_top: 0
      })
    },
    closePreview() {
      this.setData({
        previewHideStatus: false,
        preview_box_top: 0,
      })
    },
    setNavSize() {
      var that = this,
        sysinfo = wx.getSystemInfoSync(),
        windowWidth = sysinfo.windowWidth * app.globalData.rpxR;
      let menuBtnLeftWith = wx.getMenuButtonBoundingClientRect()["left"]
      let menuBtnTop = wx.getMenuButtonBoundingClientRect()["top"] * app.globalData.rpxR
      let menuBtnHeight = (wx.getMenuButtonBoundingClientRect()["bottom"] - wx.getMenuButtonBoundingClientRect()["top"]) * app.globalData.rpxR;
      let safeAreaBottom = (sysinfo.screenHeight - sysinfo.safeArea.bottom) * app.globalData.rpxR;

      that.setData({
        windowWidth: windowWidth,
        menuBtnLeftWith: menuBtnLeftWith,
        menuBtnTop: menuBtnTop,
        menuBtnHeight: menuBtnHeight,
        safeAreaBottom: safeAreaBottom == 0 ? 20 : safeAreaBottom,
      })
    },
    optionChange(e) {
      const { type } = e.currentTarget.dataset
      this.closePreview()
      if (type == 'add') this.triggerEvent('shippingCarChange');
      if (type == 'buy') this.triggerEvent('buyNowChange');
    },
    spcSwich(e) {
      const { index } = e.currentTarget.dataset
      this.setData({
        imgindex: index
      })
    }
  }
})